class Lists {
    constructor() {
        this.main = document.querySelector('.main')
        this.bigPic = document.querySelector('.hot-b>.bigPic')
        this.ul = document.querySelector('.hot-b>ul')
        this.ul1 = document.querySelector('.new-b>ul')
        this.b = document.querySelector('.cart>a>b')
        this.init()
    }
    init() {
        this.request()
    }
    request() {
        pAjax({ url: './libs/goods.json' })
            .then(res => {
                let data = JSON.parse(res)
                let hotBig = data.slice(100, 101)
                let hotList = data.slice(101, 111)
                let newList = data.slice(500, 504)
                this.render(hotBig, hotList, newList)
            })
    }
    render(hotBig, hotList, newList) {
        hotBig.forEach(item => {
            this.bigPic.innerHTML += `
            <a href="./html/details.html?id=${item.goods_id}">
                <img src="${item.img_small_logo}">
            </a>
            <div class='text'>
                <span>${item.title}</span>
                <div class="price">
                    <b>${item.price}</b>
                    <button data-id=${item.goods_id}>+</button>
                </div>
            </div>  
            `
        })
        hotList.forEach(item => {
            if (item.is_hot == true) {
                this.ul.innerHTML += `
                    <li>
                        <a href="./html/details.html?id=${item.goods_id}">
                            <img src="${item.img_small_logo}">
                        </a>
                        <div class='text'>
                            <span>${item.title}</span>
                            <div class="price">
                                <b>${item.price}</b>
                                <button data-id=${item.goods_id}>+</button>
                            </div>
                        </div>
                    </li>
                `
            }
        })
        newList.forEach(item => {
            this.ul1.innerHTML += `
            <li>
                <a href="./html/details.html?id=${item.goods_id}">
                    <img src="${item.img_small_logo}">
                </a>
                <span>${item.title}</span>
                <div class="price">
                    <b>${item.price}</b>
                    <button data-id=${item.goods_id}>+</button>
                </div>
            </li>
            `
        })
        this.bindHtml(hotBig, hotList, newList)
    }
    bindHtml(hotBig, hotList, newList) {
        this.main.addEventListener('click', (e) => {
            let target = e.target || e.srcElement
            if (target.nodeName == 'BUTTON') {
                if (getCookie('username') == undefined || getCookie('password') == undefined) {
                    location.href = './html/login.html'
                } else{
                    let id = target.dataset.id - 0
                        let goods = hotBig.find(item => { return item.goods_id == id }) || hotList.find(item => { return item.goods_id == id }) || newList.find(item => { return item.goods_id == id })
                        let list = JSON.parse(localStorage.getItem('cart')) || []
                        if (!list.length) {
                            goods.cart_number = 1
                            list.push(goods)
                            console.log(list)
                        } else {
                            let res = list.some(item => { return item.goods_id == id })
                            if (res) {
                                let index = list.findIndex(item => { return item.goods_id == id })
                                list[index].cart_number++
                            } else {
                                goods.cart_number = 1
                                list.push(goods)
                            }
                        }
                        localStorage.setItem('cart', JSON.stringify(list))
                        window.totalNum()
                }     
                }
        })
    }
}
new Lists()